/*
* @Author: yanyanru
* @Date: 2018/4/10
* @description: 人物列表
*/
<template>
  <div>
    <div class="p-30">
      <el-form labelWidth="100px">
        <el-row>
          <el-col :span="9">
              <el-form-item label="查询">
                <el-input v-model="personSearch.selectValue"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item labelWidth="10px">
              <el-select v-model="personSearch.selectType" placeholder="请选择" width="100%">
                <el-option v-for="item in personSearchNameType"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信息状态">
              <el-select v-model="infoStatusList" placeholder="请选择" multiple class="w-100">
                <el-option
                  v-for="item in infoStatus"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="质检状态">
              <el-select v-model="qualityStatusList" placeholder="请选择" multiple style="width:70%;">
                <el-option
                  v-for="item in quality"
                  :key="item.dictValue"
                  :label="item.dictName"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>  
          <el-col class="pull-right" :span="4">
            <el-button type="primary" class="m-t-5" @click="searchPersonList">搜索</el-button>
            <el-button type="primary" class="m-t-5" @click="addPerson">添加</el-button>
          </el-col> 
        </el-row>
      </el-form>
      <el-row :gutter="20">
        <el-col>
          <span class="m-r-15 ca-info-color">已编辑信息:{{totalData.editedCount}}条</span>
          <span class="m-r-15 ca-info-color">已发布信息:{{totalData.publishCount}}条</span>
          <span class="ca-info-color-red">质检未通过信息:{{totalData.qualityCount}}条</span>
        </el-col>
      </el-row>
      <el-table class="m-t-20" :data="personData">
        <el-table-column  label="人物ID" width="90" align="center" sortable prop="id">
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="中文名称" align="center" prop='cnName'>
          <template slot-scope="scope">
            {{scope.row.cnName}}
          </template>
        </el-table-column>
        <el-table-column label="企业名称" align="center" prop='fullName'>
          <template slot-scope="scope">
            {{scope.row.fullName}}
          </template>
        </el-table-column>
        <el-table-column label="发布时间" align="center" sortable>
          <template slot-scope="scope">
            <el-row>
                <span>{{scope.row.publishTime}}</span>
            </el-row>
            <el-row>
                <span> {{scope.row.publishUserName}}</span>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" sortable>
          <template slot-scope="scope">
             <el-row>
                <span>{{scope.row.modifyTime}}</span>
            </el-row>
            <el-row>
                <span> {{scope.row.modifyUserName}}</span>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="信息状态" align="center" width='90' prop="infoStatus">
          <template slot-scope="scope">
            {{scope.row.infoStatus | getNameById("infoStatus")}}
          </template>
        </el-table-column>
        <el-table-column label="质检状态" align="center" prop="qualityStatus">
          <template slot-scope="scope">
            {{scope.row.qualityStatus | getNameById("qualityStatus")}}
          </template>
        </el-table-column>
         <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button  type="text" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="deleteCheck(scope.row.id)">删除</el-button>  
                <el-button type="text">操作历史</el-button> 
            </template>
        </el-table-column>
      </el-table>
       <div class="m-t-20">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[25, 50, 75, 100]"
              :page-size="pageParam.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParam.totalCount">
          </el-pagination>
        </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import PersonService from '../../../service/subject/person';
import { PageParam } from '../../../api/Interface';
import { PersonSearchDto } from '../../../service/subject/person/personInterface';
import { setParamsForList, getParamsForList, LocalParams } from '../../../libs/utils';
@Component({
  components: { }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public personSearch: PersonSearchDto = {} as PersonSearchDto; // <PersonSearchDto>
  public pageParam: PageParam = { pageIndex: 1, pageSize: 10 } as PageParam; //分页
  public totalData: object = {};
  public infoStatusList: string[] = []; // 信息状态list
  public qualityStatusList: string[] = []; // 质检状态list
  public value: object[] = [];
  public name: string = '';
  public personSearchNameType: object[] = this.$store.state.user.dictionary.dicList.personSearchNameType; // 搜索下拉
  public quality: object[] = this.$store.state.user.dictionary.dicList.qualityStatus; // 质检状态
  public infoStatus: object[] = this.$store.state.user.dictionary.dicList.infoStatus; // 信息状态
  // public totalPage: number = 100; // 总页数
  public personData: object[] = []; // 人物列表

  // refs
  public $refs: { };
  // watch
  @Watch('value')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }
  // 声明周期钩子
  public mounted() {
    
  }
  public created() {
    this.getTotalData();
    this.pageParam.pageIndex = 1;
    this.pageParam.pageSize = 10;
    // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams: LocalParams = getParamsForList(routerName);
    this.personSearch = Object.assign(this.personSearch, localParams.searchParams);
    this.pageParam = Object.assign(this.pageParam, localParams.pageParam);
    this.infoStatusList = localParams.searchParams.infoStatus ? localParams.searchParams.infoStatus.split(',') : [];
    this.qualityStatusList = localParams.searchParams.qualityStatusList ? localParams.searchParams.qualityStatusList.split(',') : [];
    console.log(this.personSearch, 'personSearch');
    console.log(this.pageParam, 'pageParam');
    this.searchPersonList();
  }

  // 方
  // 获取列表
  public async searchPersonList() {
    this.personSearch['pageParam.pageIndex'] = this.pageParam.pageIndex;
    this.personSearch['pageParam.pageSize'] = this.pageParam.pageSize;
    this.personSearch.infoStatus = this.infoStatusList.join(',');
    this.personSearch.qualityStatus = this.qualityStatusList.join(',');
    // local中存当前搜索条件 
    const params = {
      pageParam: this.pageParam,
      searchParams: this.personSearch,
      infoStatus: this.infoStatusList,
      qualityStatus: this.qualityStatusList
    };
    const routerName = this.$root.$route.name;
    console.log(params, 'params');
    console.log(this.$root.$route.name);
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
    const res = await PersonService.getPersonList(this.personSearch);
    this.personData = res.data.resultData;
    this.pageParam.totalCount = res.data.totalPage;
  }
  // 获取统计数据
  public async getTotalData() {
    const totalData = await PersonService.getPersonCount();
    this.totalData = totalData;
  }
  // 删除前检查是否有关联数据
  public async deleteCheck(id: string) {
    const res = await PersonService.getDeletePersonCheck({personsId: id});
    if (res.data.eventRelation === 0 && res.data.companyRelation === 0) {
      this.$confirm('是否删除此条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delete(id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
  // 删除人物接口 真删除
  public async delete(personId: string) {
    const {resCode} = await PersonService.deletePerson({id: personId});
    if (resCode === '0') {
       this.$message({
        type: 'success',
        message: '删除成功'
      }); 
    }
  }
  // 编辑信息
  public edit(personId: string) {
    this.$router.push({name: 'person-detail', params: {id: personId}});
  }
  public addPerson() {
    this.$router.push({name: 'person-detail', params: {id: '-1'}});
  }
  // 分页
  public handleSizeChange(val: number) {
    this.pageParam.pageSize = val;
    this.searchPersonList();
  }
  // 当前页改变的时候
  public handleCurrentChange(val: number) {
    this.pageParam.pageIndex = val;
    this.searchPersonList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
